<template>
  <div class="px-5" v-loading="isLoading" element-loading-text="Loading..." :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50">
    <!--  歌单信息-->
    <div class="flex">
      <!-- 左侧图片 -->
      <img :src="detailInfo.coverImgUrl" class="w-36 h-36 rounded-xl" alt="" />
      <!-- 右侧信息 -->
      <div class="ml-5 flex flex-col justify-between">
        <div>
          <p class="text-xl font-bold">{{ detailInfo.name }}</p>
          <div v-if="detailInfo.id" class="text-gray-400 text-sm flex items-end">
            <img :src="detailInfo.creator.avatarUrl" class="w-6 h-6 rounded-full mr-3" />
            {{ detailInfo.creator.nickname }}
          </div>
          <div class="my-2 relative w-full text-sm">
            <p :class="showDetail ? '' : 'line-clamp-1 text-ellipsis'" class="text-gray-400">
              {{ detailInfo.description }}
            </p>
            <span class="w-fit text-black cursor-default absolute right-1" @click="showDetail = !showDetail">[详情]</span>
          </div>
        </div>
        <div class="flex gap-4" v-if="!showDetail">
          <!-- 播放按钮-->
          <div @click="playAllSongs" class="flex h-fit px-5 py-1 rounded-2xl items-center bg-gray-200">
            <svg t=" 1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="4038" width="22" height="22">
              <path
                d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                fill="#040000" p-id="4039"></path>
            </svg><span>播放</span>
          </div>
          <!-- 收藏按钮-->
          <div class="flex h-fit px-5 py-1 rounded-2xl items-center bg-gray-200">
            <svg t="1727676589202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5394" width="22" height="22">
              <path
                d="M512.043 193.237a255.915 255.915 0 0 1 351.658 9.728 256 256 0 0 1 10.07 351.403L511.957 916.693 150.23 554.368a256 256 0 0 1 361.814-361.13z"
                fill="#2c2c2c" p-id="5395"></path>
            </svg><span>收藏</span>
          </div>
          <!-- 更多按钮 -->
          <div class="flex h-fit p-1 rounded-2xl items-center bg-gray-200">
            <el-icon size="25">
              <MoreFilled />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <!-- 歌单歌曲列表 -->
    <el-tabs class="py-5" v-model="activeName">
      <!-- 歌曲列表 -->
      <el-tab-pane :label="'歌曲(' + list.length + ')'" name="songList">
        <!-- 歌单歌曲列表 -->
        <SongList :songsList="list" />
      </el-tab-pane>
      <!-- 评论信息 -->
      <el-tab-pane label="评论" name="comment">
        <div class="text-sm pb-16">
          <!-- 全部评论 -->
          <div class="py-2">全部评论({{ songListComment.length }})</div>
          <div class="my-2 w-full">
            <div class="flex w-full group/tip py-3" v-for="(item, index) in songListComment">
              <img :src="item.user.avatarUrl" class="w-10 h-10 rounded-full" />
              <div class="ml-3 text-xs flex-1">
                <!--用户名称 -->
                <div class="text-gray-400">
                  <p class="flex gap-2 items-center">
                    {{ item.user.nickname }}
                    <img v-if="item.user.vipRights?.associator" class="h-3"
                      :src="item.user.vipRights.associator.iconUrl" />
                    <img v-if="item.user.vipRights?.redplus" class="h-3" :src="item.user.vipRights.redplus.iconUrl" />
                  </p>
                  <p>{{ item.timeStr }} 来自{{ item.ipLocation.location }}</p>
                </div>
                <!-- 评论内容 -->
                <div class="my-4 line-clamp-2">
                  {{ item.content }}
                </div>
                <!-- 点赞icon回复信息 -->
                <div class="relative flex items-end text-gray-400 hover:cursor-pointer">
                  <!-- 点赞图标 -->
                  <svg @click="likeComment(item.commentId, index)" t="1730194877218" class="icon"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2691" width="20"
                    height="20">
                    <path
                      d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                      :fill="isLike == 1 && activeIndex == index ? '#4ade80 ' : '#515151'" p-id="2692"></path>
                  </svg>
                  <span v-if="item.likedCount">{{ item.likedCount }}</span>

                  <span v-if="!showReplyInput || activeIndex != index" @click="showReply(index)"
                    class="mx-3 hover:text-green-400">回复</span>
                  <span v-else @click="showReply(index)" class="mx-3 hover:text-green-400">取消</span>

                  <span class="invisible group-hover/tip:visible hover:text-green-400">举报</span>
                  <span @click="" v-if="item.beReplied.length"
                    class="absolute right-2 flex items-center gap-2 hover:text-green-400">
                    查看{{ item.beReplied.length }}条回复
                    <el-icon>
                      <ArrowDown />
                    </el-icon>
                  </span>
                </div>
                <!--回复评论 -->
                <div v-if="showReplyInput && activeIndex == index"
                  class="my-5 py-2 flex justify-center items-center gap-2">
                  <input type="text" placeholder="期待你的神评论" class="pl-5 rounded-full flex-1 h-[35px] bg-[#EFEFEF]" />
                  <svg t="1730189569057" class="icon absolute right-20" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5604" width="20" height="20">
                    <path
                      d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667z m48.384 532.928A234.538667 234.538667 0 0 1 520.405333 768a234.538667 234.538667 0 0 1-203.264-117.333333 21.333333 21.333333 0 0 0-36.949333 21.333333 277.184 277.184 0 0 0 240.213333 138.666667c100.16 0 190.997333-53.546667 240.213334-138.666667a21.333333 21.333333 0 0 0-36.906667-21.333333zM341.333333 426.624c0-23.552 18.944-42.624 42.666667-42.624 23.573333 0 42.666667 19.157333 42.666667 42.624v42.752A42.538667 42.538667 0 0 1 384 512c-23.573333 0-42.666667-19.157333-42.666667-42.624v-42.752z m256 0c0-23.552 18.944-42.624 42.666667-42.624 23.573333 0 42.666667 19.157333 42.666667 42.624v42.752A42.538667 42.538667 0 0 1 640 512c-23.573333 0-42.666667-19.157333-42.666667-42.624v-42.752z"
                      fill="#707070" p-id="5605"></path>
                  </svg>
                  <el-button type="success" round>发表</el-button>
                </div>
                <div v-if="item.beReplied.length" class="bg-[#EFEFEF] my-5 h-10 flex items-center px-2 rounded-md">
                  <span class="text-green-400">{{ item.beReplied[0].user.nickname }}:</span>{{ item.beReplied[0].content
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 发表评论 -->
        <div
          class="fixed bottom-[13vh] bg-white w-[calc(100vw-230px)] left-[230px] py-2 flex justify-center items-center gap-2">
          <el-input v-model="comment" placeholder="期待你的神评论" type="textarea" show-word-limit maxlength="200"
            resize="none" style="width: 85%"></el-input>
          <el-button type="success" round>发表</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useStore } from '@renderer/store'
import { likeCommentType } from '@renderer/types'

const detailInfo = reactive({} as any)
const list = ref([] as any)
const { songListStore, playListStore, songDetailStore, albumStore, djListStore } = useStore()
const { songListDetail, songsList, songListComment } = storeToRefs(songListStore)
const { albumList, ablumDetail } = storeToRefs(albumStore)
const { djList, djDetails } = storeToRefs(djListStore)
const isLoading = ref(true)
// 懒加载icon
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const route = useRoute()
// 歌单id
const routeInfo = reactive({
  id: 0,
  type: ''
})
// 标签页el-tabs默认显示的标签
const activeName = ref('songList')
const comment = ref('')
const showDetail = ref(false)
const showReplyInput = ref(false)
// 当前的评论
const activeIndex = ref(-1)
// 是否点赞评论：0不点赞1点赞
const isLike = ref(0)

onMounted(() => {
  Object.assign(routeInfo, route.query)
  getSongListDetails()
  getComment()
})

const getSongListDetails = () => {
  if (routeInfo.type == 'songList') {
    // 获取歌单详情
    songListStore.getSongListDetail(routeInfo.id).then(() => {
      list.value = songsList.value
      Object.assign(detailInfo, songListDetail.value)
      isLoading.value = false
    })
  } else if (routeInfo.type == 'djLIst') {
    // 获取电台详情
    djListStore.getDjDetails(routeInfo.id).then(() => {
      Object.assign(detailInfo, djDetails.value)
    })
    djListStore.getDjList(routeInfo.id).then(() => {
      list.value = djList.value
    })
    isLoading.value = false
  }
  else {
    // 获取专辑详情
    albumStore.getAlbumList(routeInfo.id).then(() => {
      Object.assign(detailInfo, ablumDetail.value)
      list.value = albumList.value
      isLoading.value = false
    })
  }
}
// 获取歌单评论
const getComment = () => {
  if (routeInfo.type == 'songList') { songListStore.getSongListComment(routeInfo.id) }
  else {
    // 获取专辑评论
  }
}
// 点击播放全部歌曲
const playAllSongs = () => {
  const id = list.value[0].id
  // 默认播放歌单第一首歌曲
  songDetailStore.getSongDetail(id)
  songDetailStore.getSongUrl(id)
  // 添加所有歌曲到播放列表
  playListStore.addAllSongToPlayList(list.value)
}
const showReply = (index: number) => {
  showReplyInput.value = !showReplyInput.value
  activeIndex.value = index
}
//取消和点赞评论
const likeComment = (cid: number, index: number) => {
  activeIndex.value = index
  if (isLike.value) {
    isLike.value = 0
  } else {
    isLike.value = 1
  }
  const obj: likeCommentType = {
    id: songListDetail.value.id,
    cid: cid,
    t: isLike.value,
    type: 2
  }
  songListStore.getLikeComment(obj).then(() => {
    getComment()
  })
}
</script>
